<template>
  <div>
    <nut-uploader
      :url="uploadUrl"
      @success="success"
      @delete="handleDelete"
      :maximum="maxNum"
      :headers="headers"
      :maximize="maxSize"
      v-model:file-list="defaultFileList"
      multiple
    ></nut-uploader>
  </div>
</template>

<script setup lang="ts">
import { upload } from '~/api/common'
import storage from '~/utils/storage'

const props = defineProps<{
  maxNum: number
}>()
const emit = defineEmits(['success', 'delete'])
const uploadUrl = upload //上传路径
const maxSize = ref<number>(1024 * 5120) //上传文件大小默认5mb
const maxNum = ref<number>(3) //上传文件数量
const defaultFileList = ref<any>([])
const headers = ref({
  token: storage.getAccessToken()
})

watch(
  () => props.maxNum,
  async (val) => {
    if (val) {
      maxNum.value = val
    }
  },
  { immediate: true, deep: true }
)

function success({ data }: any) {
  const result = JSON.parse(data.data)
  if (result.success) {
    emit('success', result.result)
  }
}

function handleDelete({ index }: any) {
  emit('delete', index)
}
</script>

<style scoped></style>
